| |
| あとはJavaScriptの記述すればページが完成します。最初に画像の表示倍率を指定する変数「size」の初期値を「1」に指定します。自作関数「zoom()」では、マウスホイールの動きをもとに変数「size」の値を変化させ「img01」の表示倍率を変更します。ホイールの動きはevent.wheelDeltaで検出できますが、これにより返される値は120の倍数となり、ホイールが動された方向により±が変化します。この値を変数「swt」に代入し、「swt」の値に応じて表示倍率「size」を変化させます。これにはif文を使い、「swtが-120以下」かつ「sizeが0.2より大きい」（sizeが0以下にならないように）場合は「size」を0.1減少、それ以外の場合は「size」を0.1増加させます。あとは「img01.style.zoom=size」で画像「img01」の表示倍率を変更すれば自作関数「zoom()」は完成です。 |
<HTML>
<HEAD>
<TITLE>初めてのホームページ作成</TITLE>
</HEAD>
<SCRIPT language="JavaScript">
size=1;
function zoom(){
swt=event.wheelDelta;
if(swt<=-120 && size>0.2){size=size-0.1}
else{size=size+0.1}
img01.style.zoom=size;
}
</SCRIPT>
<BODY onmousewheel="zoom()">
下の画像はマウスホイールで拡大縮小できます。<BR>
※対応ブラウザはInternet Explorer 6以上です。<BR>
<IMG src="img01.jpg" id="img01">
</BODY>
</HTML>
|
 |
|
